Product Collection Block

The Product Collection block is designed to help you display and customize archives of products; and offer product recommendations.

Upon inserting the block, and depending on the template or page that you are currently editing, you will be prompted to create your own custom product collection; or choose from a list of variations/recipes that enable you to quickly offer some of the most common types of recommendations.

The Product Collection block is used by default in all the WooCommerce templates for displaying your product catalog:

• Product Catalog,
• Products by Category,
• Products by Tag,
• Products by Attribute and
• Product Search Results

Beyond the templates where it is included, you can add the Product Collection block to any page or template on your site where you’d like to showcase your products.

The product collection block has a selection of predefined recipes that you can choose from, and then further customize. The premade collection recipes are great for banners and by default only show a single row of products with no pagination, but can be edited to fit any design or layout. You can also choose to create a custom collection.

By default the Product Catalog collection displays your shop’s entire catalog, and adapts to the context of the page that it’s on. For example, if you add the Product Catalog collection to the “Products by Tag” template, when a shopper visits the page for a specific tag, they’ll only see the products in your catalog that have that tag. You can disable a product collection from dynamically matching the context of a page by toggling the “Sync with current query” setting in the Collection’s sidebar block settings.

Use this collection to showcase your featured products. See how to mark products as featured. 

Use this product collection to recommend the products in your shop with the best reviews.

Just like the name says, this product collection will showcase the products in your shop that are on sale!

The best sellers product collection showcases the products that have been purchased the most on your site.  When products have been sold the same number of times, the product published most recently will be shown first.

The new arrivals product collection highlights products most recently added to your catalog. By default only products created within the last 7 days will be displayed. This setting can be adjusted in the block sidebar.

Collections are, essentially, preset filters on the collection block. You can change the selected collection at any time with the “Choose Collection” button in the Block toolbar, then tweak the filters in the block settings sidebar as desired.

After selecting which product collection to use, in the list view you’ll see a parent block added that matches the collection you chose, with blocks inside for: 

• Product Template – These blocks show the product’s image, title, price, and add to cart button. 
• Pagination – These blocks control how your shoppers navigate through your collection. If you set your collection to show only 1 page of products, these controls will not be displayed.
• No results – These blocks show the “Empty state” of the collection. i.e. What your shoppers will see if they navigate to the page and no products match your set collection filters.

Each of these block elements is composed of several nested inner blocks, each of which has its own settings and can be removed if needed. Explore the settings of the parent block and each inner block by selecting it, then checking the block and style settings in the settings sidebar, as well as any settings in the block toolbar. See our guide on exploring block settings here

In addition to altering the settings of the existing blocks, you can also add additional blocks of your choosing to further customize the product templates, add additional content to the collection area, or change its layout! Feel free to explore and see where your creativity takes you!

Customizing your shop page with the Product Collection block gives you lots of options for how to display your products. Here we cover some important basics. You can take things further to create very interesting and compelling designs by utilizing layout blocks to alter the structure, and the style options to match your brand.

To set a product collection to only display a single row of products: 

1. In the collection’s sidebar block settings choose the “Grid” layout option, then enter how many columns you’d like in your row of products. Leave the “Responsive” toggle unchecked.
2. In the collection’s block toolbar, click the “Display Settings” icon and set the “Items per page” to the same number of columns you’ve chosen, and the “Max pages to show” to 1

Now your product collection will display as a single row with the number of columns you’ve selected.

If you have a specific design in mind, sometimes you’ll want to display a specific filtered set of products, instead of having the product collection match the query and filters of the current page or template.

To make a product collection display a custom filtered set of products:

1. In the collection’s sidebar block settings leave the “Sync with current query” toggle disabled. The “Filters” section will appear.
2. Under the “Filters” section in the sidebar block settings, click the three dots menu, then click to toggle the different filtering options.
   • After clicking a filter in the list to toggle it on, that filter and its options will display in the block settings sidebar under the “Filters” section.
3. Using your chosen filters filters, select the products, categories, or combinations that you want to show in this collection.

This can be a great use of a second product collection on a page, that acts as a banner to recommend specific products to your shoppers. The possibilities are nearly endless!

Do you still have questions and need assistance? 

• If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
• Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
• Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.